import { h } from "./element";
import { bindClickoutside, unbindClickoutside } from "./event";
import { cssPrefix } from "../config";
import { tf } from "../locale/locale";
import Clipboard from "../core/clipboard";
let menuItems = [
  {
    key: "copy",
    title: tf("contextmenu.copy"),
    label: "Ctrl+C",
    disable: false
  },
  { key: "cut", title: tf("contextmenu.cut"), label: "Ctrl+X", disable: false },
  {
    key: "paste",
    title: tf("contextmenu.paste"),
    label: "Ctrl+V",
    disable: true
  },
  {
    key: "paste-value",
    title: tf("contextmenu.pasteValue"),
    label: "Ctrl+Shift+V"
  },
  {
    key: "paste-format",
    title: tf("contextmenu.pasteFormat"),
    label: "Ctrl+Alt+V"
  },
  { key: "divider" },
  { key: "insert-row", title: tf("contextmenu.insertRow") },
  { key: "insert-column", title: tf("contextmenu.insertColumn") },
  { key: "divider" },
  { key: "delete-row", title: tf("contextmenu.deleteRow") },
  { key: "delete-column", title: tf("contextmenu.deleteColumn") },
  { key: "delete-cell-text", title: tf("contextmenu.deleteCellText") },
  { key: "hide", title: tf("contextmenu.hide") },
  { key: "divider" },
  // { key: 'validation', title: tf('contextmenu.validation') },
  // { key: "setUser", title: tf("contextmenu.setUser") },
  // { key: "cancelUser", title: tf("contextmenu.cancelUser") },
  { key: "divider" }
  // { key: 'cell-printable', title: tf('contextmenu.cellprintable') },
  // { key: 'cell-non-printable', title: tf('contextmenu.cellnonprintable') },
  // { key: 'divider' },
  // { key: 'cell-editable', title: tf('contextmenu.celleditable') },
  // { key: 'cell-non-editable', title: tf('contextmenu.cellnoneditable') },
];

function buildMenuItem(item) {
  if (item.key === "divider") {
    return h("div", `${cssPrefix}-item divider`);
  }
  if (item.disable) {
    return h("div", `${cssPrefix}-item disabled`)
      .on("click", () => {
        this.itemClick(item.key);
        this.hide();
      })
      .children(item.title(), h("div", "label").child(item.label || ""));
  } else {
    return h("div", `${cssPrefix}-item`)
      .on("click", () => {
        this.itemClick(item.key);
        this.hide();
      })
      .children(item.title(), h("div", "label").child(item.label || ""));
  }
}

function buildMenu() {
  return menuItems.map(it => buildMenuItem.call(this, it));
}

export default class ContextMenu {
  constructor(viewFn, menus, isHide = false) {
    if (menus != null && menus.length > 0) {
      menuItems = [];
      menus.map(item => {
        menuItems.push({
          key: item.key,
          title: tf(item.title),
          label: item.label,
          disable: item.disable
        });
      });
    }
    // console.log(menuItems,viewFn)
    this.menuItems = buildMenu.call(this);
    // console.log(this.menuItems)
    this.el = h("div", `${cssPrefix}-contextmenu`)
      .children(...this.menuItems)
      .hide();
    this.viewFn = viewFn;
    this.itemClick = () => {};
    this.isHide = isHide;

    this.setMode("range");
  }

  // row-col: the whole rows or the whole cols
  // range: select range
  setMode(mode) {
    if (this.menuItems.length > 12) {
      const hideEl = this.menuItems[12];
      // console.log(hideEl)
      if (mode === "row-col") {
        hideEl.show();
      } else {
        hideEl.hide();
      }
    }
  }

  hide() {
    const { el } = this;
    el.hide();
    unbindClickoutside(el);
  }
  /**
   * 描述：单元格右键设置菜单位置，重构菜单
   * 时间： 2021/2/26
   */
  setPosition(x, y, clipboard) {
    if (this.isHide) return;
    console.log(clipboard);
    let { el } = this;
    // if (clipboard.range !== null){
    //   menuItems.map(item=>{
    //     if (item.key==="paste")
    //     {
    //       item.disable = false
    //       item.label= 'Ctrl+V'
    //     }
    //   })
    //   this.menuItems = buildMenu.call(this);
    //   el = h("div", `${cssPrefix}-contextmenu`).children(...this.menuItems);
    //   console.log(el,el.el,'paste')
    //   let sheet=document.getElementsByClassName("x-spreadsheet-sheet");
    //   let child=sheet[0].getElementsByClassName("x-spreadsheet-contextmenu");
    //   sheet[0].removeChild(child[0])
    //   sheet[0].appendChild(el.el)
    // }else {
    //   console.log(el,el.el,'no')
    // }
    const { width } = el.show().offset();
    const view = this.viewFn();
    const vhf = view.height / 2;
    let left = x;
    if (view.width - x <= width) {
      left -= width;
    }
    // console.log(width,view,vhf)
    el.css("left", `${left}px`);
    if (y > vhf) {
      el.css("bottom", `${view.height - y}px`)
        .css("max-height", `${y}px`)
        .css("top", "auto");
    } else {
      el.css("top", `${y}px`)
        .css("max-height", `${view.height - y}px`)
        .css("bottom", "auto");
    }
    bindClickoutside(el);
  }
}
